console.log("store.dispatch('getBabys', id).then(function(response){}", json.stringify(response));<template>
  <div class="page">
      <div class="edit-normal-client-main">
        <group>
          <x-input title="家长姓名" v-model="client.parent_name" placeholder="请输入家长姓名" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
          <x-input title="手机号码" v-model="client.mobile_num" placeholder="输入手机号码" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
          <x-input class="address" title="所在地址" v-model="client.address" placeholder="请输入地址" raw-value :list="addressData" placeholder-align="right"></x-input>

          <div class="babayArea" v-for="(baby, index) in this.babies" v-if="index == 0" :key="index">
            <x-input title="宝宝姓名" v-model="baby.baby_name" placeholder="输入宝宝姓名" placeholder-align="right" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" ></x-input>
            <selector direction="rtl" title="宝宝性别" v-model="baby.baby_sex" placeholder="输入宝宝性别"  :options="babyGenderOptions" placeholder-align="right"></selector>
            <datetime title="宝宝生日" v-model="baby.baby_birthday" placeholder="请选择宝宝生日" placeholder-align="left"></datetime>
          </div>

          <x-input title="所属行业" placeholder="请选择所属行业" :options="industryOptions" v-model="client.parent_industry" placeholder-align="right"></x-input>
          <selector direction="rtl" title="客户来源" placeholder="请选择客户来源" :options="clientSources" v-model="client.source_id" placeholder-align="right" ></selector>
          <selector direction="rtl" title="跟进状态" placeholder="请选择跟进状态" :options="customStatusOptions" v-model="client.custom_status" placeholder-align="right" ></selector>
          <selector direction="rtl" title="客户属性" placeholder="请选择客户属性" :options="customPropertyOptions" v-model="client.custom_property" placeholder-align="right" ></selector>
          <x-input title="创建人" placeholder="输入创建人" novalidate :icon-type="iconType" v-model="client.creator" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
        </group>

        <group  v-for="(baby, index) in this.babies" v-if="index>0" :title="baby.baby_name | babyGroupPrefix" :key="index">
          <x-input title="宝宝姓名" v-model="baby.baby_name" placeholder="输入宝宝姓名" placeholder-align="right" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" ></x-input>
          <selector direction="rtl" title="宝宝性别" v-model="baby.baby_sex" placeholder="输入宝宝性别"  :options="babyGenderOptions" placeholder-align="right"></selector>
          <datetime title="宝宝生日" v-model="baby.baby_birthday" placeholder="请选择宝宝生日" placeholder-align="left"></datetime>
        </group>

        <div class="btn-group">
          <span class="btn add-new-btn pull-left" @click="addBaby">+新增宝宝</span>
          <span class="btn save-btn pull-right" @click="saveClientInfo">保存</span>
        </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import clientMenu from '../components/client-menu'
  import {XInput, Group, ChinaAddressData, XAddress, Selector, Datetime} from 'vux'
  import store from '../store';

  export default{
    data () {
      return {
      containerHeight : 'height:'+document.body.scrollHeight+'px;',
      id: '',
      client:{
        name: '',
        parent_name: '',
        phone: '',
        address: '',
        babyGenderValue:'',
        birthday: '',
        iconType: '',
        source_id: '',
        baby_name: '',
        parent_industry: '',
        babyGenderValue: '',
        address: '',
        custom_status: '',
        custom_property: '',
        creator: '林丽勤',
      },

      baby: {

      },

      babies:[

      ],
      iconType: '',
      addressData : ChinaAddressData,

      address: ['广东省', '深圳市', '南山区'],

      // source_id: '',
      // parent_industry: '',
      // babyGenderValue: '',

      babyGenderOptions: [
        {
        key : 'MALE###',
        value: '男'
        },
        {
        key: 'FEMALE#',
        value: '女'
        }
      ],

      industryOptions : [

        {
        key: 'IT',
        value:'IT软件业'
        },

        {
        key:'hairdressing',
        value:'美容美甲'}
      ],

      clientSources : [

        {
        key: '0',
        value:'来源1'
        },

        {
        key:'1',
        value:'来源2'}
      ],

      followStatus : [

        {
        key: 'followed',
        value:'已跟进'
        },

        {
        key:'unfollowed',
        value:'未跟进'}
      ],

      followProperties : [

        {
        key: 0,
        value:'意向客户'
        },

        {
        key:1,
        value:'普通客户'
        }
      ],
      }
    },
    components:{
      XInput,
      Group,
      ChinaAddressData,
      XAddress,
      Selector,
      Datetime
    },
    methods: {
      refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
      },

      log () {
      console.log('ee');
      },

      load (iscroll) {
      console.log('load')
      // Load new data
      },

      test () {
        console.log('test')
      },

      onBlur () {
      },
      addBaby () {
        this.babies.push(this.baby);
      },
      onShow () {
        console.log(arguments)
      },
      //初始化客户信息
      initClientInfo(id){
        let that = this;
        store.dispatch('getCustomInfoById', id)
          .then(function(response){
            if(response.data.errcode === 0) {
              let client = response.data.results;
              that.client = client;
              that.initAddress();
              that.client.custom_type = that.custom_type == 1 ? 'QT#' : 'WX#';
              that.client.operator_id = that.loginUser.id
              that.client.operator_name = that.loginUser.name
              that.client.creator = that.loginUser.name
              console.log(JSON.stringify(that.loginUser))
            } else {
              console.debug('系统服务异常！请联系管理员!', JSON.stringify(response.data));
            }
          }).catch(function(error){
            console.log(error)
          })
      },

      initAddress () {
        this.client.address = [this.client.province, this.client.city, this.client.district].join('');
      },

      initBabyInfo (id) {
        let that = this;
        let query = this.$route.query
        store.dispatch('getBabys', id)
          .then(function (response) {
            if(response.data.errcode == 0) {
              that.babies = response.data.results;
              that.custom_type = query.custom_type;
            } else {
              console.log('服务器错误！请联系管理员!');
            }
          })
      },

      saveClientInfo () {
        let id = this.id;
        let that = this;

        // console.log('this.babies', JSON.stringify(this.babies));
        // console.log('this.client', JSON.stringify(this.client));
        // alert('保存成功！');f
        // this.$router.back();
        console.debug('that.client', JSON.stringify(that.client))
        console.debug('that.babies', JSON.stringify(that.babies))

        store.dispatch('saveClientInfo', that.client).then(function(aresponse){
        if(aresponse.data.errcode == 0) {
         store.dispatch('saveBabys', that.babies).then(function(response){
          if(response.data.errcode == 0) {
            console.debug('保存成功！');
            that.$route.back();
          } else {
            console.log('保存宝宝信息失败!', JSON.stringify(response.data))
          }
         }).catch((error) =>{
           console.log(error)
         });
        } else {
          console.log('保存客户信息失败!', JSON.stringify(aresponse.data))
        }
        }).catch((error) =>{
        console.log(error)
        });
      }

    },

    mounted () {
      let query =  this.$route.query;
      let id = query.id;

      this.id = id;
      this.initClientInfo(id);
      this.initBabyInfo(id);
    },

    computed : {
      //包含客户详情的列表
      clientsDetail () {
        return this.$store.state.app.clientsDetail;
      },

      //跟进状态选项列表
      customStatusOptions() {
        return this.$store.state.app.customStatusOptions;
      },

      //客户属性选项列表
      customPropertyOptions() {
        return this.$store.state.app.customPropertyOptions;
      },

      loginUser () {
        return this.$store.state.app.user;
      }

    },

    watch:{

    }

  }
</script>

<style lang='less'>
  @import "../less/index.less";

  .edit-normal-client-main {
    padding-bottom: 20px;

    .no-margin{
       &>*{
       margin: 0
       }
    }

    .add-new-btn{
      width: 60%;
    }

    .btn-group{
      &:extend(.clearfix all);
      margin-top: 15px;

      &>*{
      width: 38%;
      text-align: center;
      border-radius: 4px;
      padding: 10px;
      margin: 0 8px;
      border: 1px solid rgb(229, 229, 229);
      background-color: white;
      color:#23B2E2;
      display: block;
      }

      .babayArea {
      &:extend(.clearfix all);
      border-top: 1px solid #ccc;
      }

      .pull-left{
      float: left;
      }

      .pull-right{
      float: right;
      }
    }

  }
</style>
